<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简历</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
    <style>
        .horizontal {
            display: flex;
        }

        .horizontal2 {
            display: flex;
            margin-top: 5px;
        }

    </style>
</head>
<body>
<div id="app" style="color: #333333;fontSize:15px;font-family: 微软雅黑">
    <div>
        <div align="center">
            <div style="font-size: 24px;text-align: center;font-weight: bold">个人简历</div>
            <div style="width: 100px;height: 3px;background: #c0c0c0;margin-top: 5px">
            </div>
        </div>
        <br/>

        <div>
            <div v-if="about.name!=null&&about.name!=null" style="display: flex">
                <div :style="textTip">简介</div>
                <div :style="bgLine"></div>
            </div>
            <div style="display: flex;margin-left: 12px">
                <div v-if="about.head!=null&&about.head!=''">
                    <div style="height: 20px">
                    </div>
                </div>
                <div style="width: 25%">
                    <div v-if="about.name!=null&&about.name!=null" class="horizontal">
                        <div :style="textTip2">姓名</div>
                        <div>{{about.name}}</div>
                    </div>
                    <div v-if="about.gender!=null&&about.gender!=''" class="horizontal">
                        <div :style="textTip2">姓别</div>
                        <div>{{about.gender}}</div>
                    </div>
                    <div v-if="about.age!=null&&about.age!=''" class="horizontal">
                        <div :style="textTip2">年龄</div>
                        <div>{{about.age}}</div>
                    </div>
                    <div v-if="about.place!=null&&about.place!=''" class="horizontal">
                        <div :style="textTip2">籍贯</div>
                        <div>{{about.place}}</div>
                    </div>
                    <div v-if="about.experience!=null&&about!=''" class="horizontal">
                        <div :style="textTip2">相关经验</div>
                        <div>{{about.experience}}</div>
                    </div>
                </div>
                <div style="width: 75%">
                    <div v-if="about.phone!=null&&about.phone!=''" class="horizontal">
                        <div :style="textTip2">电话</div>
                        <div>{{about.phone}}</div>
                    </div>
                    <div v-if="about.email!=null&&about.email!=''" class="horizontal">
                        <div :style="textTip2">邮箱</div>
                        <div>{{about.email}}</div>
                    </div>
                    <div v-if="about.address!=null&&about.address!=''" class="horizontal">
                        <div :style="textTip2">地址</div>
                        <div>{{about.address}}</div>
                    </div>
                    <div v-if="about.education!=null&&about.education!=''" class="horizontal">
                        <div :style="textTip2">教育</div>
                        <div>{{about.education}}</div>
                    </div>
                    <div v-if="about.profession!=null&&about.profession!=''" class="horizontal">
                        <div :style="textTip2">专业</div>
                        <div>{{about.profession}}</div>
                    </div>
                </div>
                <div v-if="about.head!=null&&about.head!=''"
                     style="width: 90px;height: 120px;float: right">
                    <img style="width: 90px;height: 120px" :src="about.head">
                </div>
            </div>
        </div>

        <div v-if="about.add1!=null&&about.add1!=''">
            <div style="display: flex">
                <div :style="textTip">{{about.add1}}</div>
                <div :style="bgLine"></div>
            </div>
            <div v-if="about.addmsg1!=null">
                <div style="margin-left: 12px;margin-top: 5px" v-html="about.addmsg1"></div>
            </div>
        </div>

        <div v-if="about.add2!=null&&about.add2!=''">
            <div style="display: flex;margin-top: 5px">
                <div :style="textTip">{{about.add2}}</div>
                <div :style="bgLine"></div>
            </div>
            <div v-if="about.addmsg2!=null">
                <div style="margin-left: 12px;margin-top: 5px" v-html="about.addmsg2"></div>
            </div>
        </div>

        <div v-if="about.add3!=null&&about.add3!=''">
            <div style="display: flex;margin-top: 5px">
                <div :style="textTip">{{about.add3}}</div>
                <div :style="bgLine"></div>
            </div>
            <div v-if="about.addmsg3!=null">
                <div style="margin-left: 12px;margin-top: 5px" v-html="about.addmsg3"></div>
            </div>
        </div>

        <div v-if="companyLists!=null&&companyLists.length>0">
            <div style="display: flex;margin-top: 5px">
                <div :style="textTip">经验</div>
                <div :style="bgLine"></div>
            </div>

            <div class="horizontal2" style="margin-left: 12px;font-weight: bold;margin-right: 12px">
                <div style="width:55%">公司</div>
                <div style="width:25%">职位</div>
                <div style="width:160px">在职时间</div>
            </div>

            <div v-for="comp in companyLists" style="margin-left: 12px;margin-right: 12px">
                <div class="horizontal2">
                    <div style="width:55%">{{comp.company}}</div>
                    <div style="width:25%">{{comp.position}}</div>
                    <div style="width:160px">{{comp.workStart}}~{{comp.workEnd}}</div>
                </div>
            </div>
        </div>

        <div v-for="(career,i) in careerList">
            <div style="display: flex;margin-top: 5px">
                <div :style="textTip">项目{{i+1}}</div>
                <div :style="bgLine"></div>
            </div>
            <div class="horizontal2" style="margin-top: 5px">
                <div style="margin-right: 8px;font-weight: bold">《{{career.title}}》</div>
                <div style="width:160px">{{career.timeStart}}~{{career.timeEnd}}</div>
            </div>
            <div style="margin-left: 8px;margin-top: 5px;font-weight: bold">工作内容:</div>
            <div style="margin-left: 24px;margin-top: 5px" v-html="career.content"></div>
            <div v-if="career.duty!=null&&career.duty!=''">
                <div style="margin-left: 8px;margin-top: 5px;font-weight: bold">职责:</div>
                <div style="margin-left: 24px;margin-top: 5px" v-html="career.duty"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function Company(company, position, workStart, workEnd) {
        this.company = company;
        this.position = position;
        this.workStart = workStart;
        this.workEnd = workEnd;
    }

    function Career(title, content, duty, timeStart, timeEnd) {
        this.title = title;
        this.content = content;
        this.duty = duty;
        this.timeStart = timeStart;
        this.timeEnd = timeEnd;
    }

    //替换所有的回车换行
    function transferString(content) {
        var string = content;
        try {
            string = string.replace(/\r\n/g, "<br>")
            string = string.replace(/\n/g, "<br>");
        } catch (e) {
        }
        return string;
    }

    var vm = new Vue({
        el: '#app',
        data: {
            bgLine: {
                background: '#c0c0c0',
                marginTop: '10px',
                marginBottom: '10px',
                height: '10px',
                width: '100%'
            },
            textTip: {
                paddingTop: '5px',
                paddingBottom: '5px',
                paddingLeft: '8px',
                color: '#000b86',
                width: '80px',
                fontSize: '17px',
                fontWeight: 'bold',
                background: '#c0c0c0',
            },
            textTip2: {
                width: '65px',
            },
            urlParams: '',
            code: '',
            msg: '',
            about: {
                name: null,
                gender: null,
                age: null,
                head: null,
                email: null,
                phone: null,
                address: null,
                place: null,
                experience: null,
                education: null,
                profession: null,
                add1: null,
                addmsg1: null,
                add2: null,
                addmsg2: null,
                add3: null,
                addmsg3: null,
                createTime: null
            },
            companyLists: [],
            careerList: [],
        },
        mounted() {
            var urlHref = window.location.href;
            if (urlHref.search("#") > -1) {
                var a = urlHref.split("#")[1];
                this.details(a);
            }
        },
        methods: {
            details: function (params) {
                axios.get('/api/getAboutByAlias', {params: {a: params}}).then(
                    function (res) {
                        console.log(res.data);
                        var dataObj = JSON.parse(res.data.data);
                        console.log(dataObj);
                        vm.code = res.data.code + "->" + res.data.msg;
                        vm.about.name = dataObj.about.name;
                        vm.about.gender = dataObj.about.gender;
                        vm.about.head = dataObj.about.head;
                        vm.about.age = dataObj.about.age;
                        vm.about.email = dataObj.about.email;
                        vm.about.phone = dataObj.about.phone;
                        vm.about.address = dataObj.about.address;
                        vm.about.place = dataObj.about.place;
                        vm.about.experience = dataObj.about.experience;
                        vm.about.education = dataObj.about.education;
                        vm.about.profession = dataObj.about.profession;
                        vm.about.add1 = dataObj.about.add1;
                        vm.about.addmsg1 = transferString(dataObj.about.addmsg1);
                        vm.about.add2 = dataObj.about.add2;
                        vm.about.addmsg2 = transferString(dataObj.about.addmsg2);
                        vm.about.add3 = dataObj.about.add3;
                        vm.about.addmsg3 = transferString(dataObj.about.addmsg3);

                        var companyListJson = dataObj.companyList;
                        for (var i in companyListJson) {
                            var dateStart = new Date(companyListJson[i].workStart);
                            var dateEnd = new Date(companyListJson[i].workEnd);
                            var timeStart = dateStart.getFullYear() + "." + (dateStart.getMonth() + 1);
                            var timeEnd = dateEnd.getFullYear() + "." + (dateEnd.getMonth() + 1);
                            if (companyListJson[i].workEnd != null && companyListJson[i].workEnd === 0) {
                                timeEnd = "至今";
                            }
                            var comp = new Company(companyListJson[i].company,
                                companyListJson[i].position, timeStart, timeEnd);
                            vm.companyLists.push(comp);
                            console.log(i + "==>" + comp.company + "," + comp.position + "," + comp.workStart + "," + comp.workEnd);
                        }

                        var careerListJson = dataObj.careerList;
                        for (var i in careerListJson) {
                            var dateStart = new Date(careerListJson[i].timeStart);
                            var dateEnd = new Date(careerListJson[i].timeEnd);
                            var timeStart = dateStart.getFullYear() + "." + (dateStart.getMonth() + 1);
                            var timeEnd = dateEnd.getFullYear() + "." + (dateEnd.getMonth() + 1);
                            if (careerListJson[i].timeEnd != null && careerListJson[i].timeEnd === 0) {
                                timeEnd = "至今";
                            }
                            var career = new Career(careerListJson[i].title,
                                transferString(careerListJson[i].content),
                                transferString(careerListJson[i].duty), timeStart, timeEnd);
                            vm.careerList.push(career);
                            console.log(i + "==>" + career.title + "," + career.content + "," + career.duty + "," + career.timeStart + "," + career.timeEnd);
                        }

                    }).catch(function (err) {
                    console.log(err);
                    return err;
                });
            },
        }
    })
</script>
</body>
</html>